<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>JSX的注意</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <!-- 引入babel -->
    <script src="js/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
      const data = ["孙悟空", "猪八戒", "沙和尚"];

      // const arr = [];

      // 遍历data;
      // for (let i = 0; i < data.length; i++) {
      //   arr.push(<li>{data[i]}</li>);
      // }

      // const arr = data.map((item) => <li>{item}</li>);

      // 将arr渲染为一个列表在网页中显示
      // jsx中会自动将数组中的元素在页面中显示
      const list = (
        <ul>
          {data.map((item) => (
            <li>{item}</li>
          ))}
        </ul>
      );

      const root = ReactDOM.createRoot(document.getElementById("root"));
      root.render(list);
    </script>
  </body>
</html>
